<!-- 充值详情 -->
<template>
  <div>
      <backHeader title='充值详情'></backHeader>
      <div class="list">
          <div class="item" v-for='(item,index) in investItems' :key='index' :class='{paddingDiv:item.isPadding}'>
              <div class="name">{{item.name}}</div>
              <div class="content">{{item.content}}</div>
          </div>
      </div>
  </div>
</template>

<script>
import backHeader from '../../components/backHeader'
export default {
  props: [],
  components: {
    backHeader
  },
  data () {
    return {
      investItems: [{
        name: '交易单号',
        content: '191016165957000001'
      }, {
        name: '交易时间',
        content: '2019-10-16 16:59:57'
      }, {
        name: '交易方式',
        content: '在线充值'
      }, {
        name: '交易状态',
        content: '待审核'
      }, {
        isPadding: true
      }, {
        name: '充值金额',
        content: '100.00元'
      }, {
        name: '充值优惠',
        content: '0.00元'
      }, {
        name: '其他优惠',
        content: '0.00元'
      }, {
        isPadding: true
      }, {
        name: '备注原因',
        content: '您的存款正在审核中'
      } ]
    }
  },

  computed: {},

  methods: {}
}

</script>
<style lang='less' scoped>
.list {
    -ms-flex: 1 1;
    flex: 1 1;
    height: 100%;
    overflow: scroll;
}
.list .item {
    background-color: #fff;
    padding: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    color: #3f3f3f;
    overflow: hidden;
    -webkit-box-shadow: 0 1px 1px #eee;
    box-shadow: 0 1px 1px #eee;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.paddingDiv{
    padding:0px !important;
    height:12px;
    background-color:#f5f5f5 !important;
}
</style>
